<?php
    //  收货地址编辑，添加页面
    require_once "config.php";
    require_once "weixin_info.php";
    require_once "jssdk.php";
    $id = empty($_GET['id']) ? '' : $_GET['id'];
    if(!empty($id)){
        $add_sql = $mysql->query("select * from dyspw_mem_address where  id = {$id} ");
        $add_info = $add_sql->fetch_all(MYSQLI_ASSOC);
    }
 ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <title>管理收货地址</title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet" />
    <link href="css/index.css" rel="stylesheet" />
    <link rel="stylesheet" href="css/core.css">
    <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=d021bae86db1d54dddc4071a5123749c&plugin=AMap.Geocoder"></script>
    <style>
        .mui-input-row input::placeholder {
            font-size: 12px;
            letter-spacing: 1px;
            color: #999 !important;
        }
        .mui-input-row input::-webkit-input-placeholder {
            font-size: 12px;
            letter-spacing: 1px;
            color: #999 !important;
        }
        .mui-input-row input::-ms-input-placeholder {
            font-size: 12px;
            letter-spacing: 1px;
            color: #999 !important;
        }
        .mui-input-row input::-moz-placeholder {
            font-size: 12px;
            letter-spacing: 1px;
            color: #999 !important;
        }
    </style>

    <script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>
</head>
<body>
    <section class="address-edit-box">
        <header id="header" class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h1 id="editAddressTittle" class="mui-title">新增</h1>
        </header>
        <form id="addressEditForm" class="mui-input-group">
            <div class="mui-input-row">
                <label> <i style="color: red;">*</i> 联系人</label>
                <input id="person" type="text" class="mui-input-clear" value="<?php if(!empty($add_info)){ echo $add_info[0]['add_link'];} ?>" placeholder="请输入联系人">
            </div>
            <div class="mui-input-row">
                <label></label>
                <div class="address-gender">
                    <span gender="1"  <?php if(!empty($add_info)){if($add_info[0]['add_sex'] == 1){echo 'class="active"';}}else{echo 'class="active"';} ?>>先生</span>
                    <span gender="2" <?php if(!empty($add_info)){if($add_info[0]['add_sex'] == 2){echo 'class="active"';}} ?>>女士</span>
                </div>
            </div>
            <div class="mui-input-row">
                <label><i style="color: red;">*</i>电话</label>
                <input id="phone" type="text" class="mui-input-clear" placeholder="请输入电话" value="<?php if(!empty($add_info)){ echo $add_info[0]['add_mobile'];} ?>">
            </div>
            <div class="mui-input-row">
                <label><i style="color: red;">*</i>地址</label>
                <input id="address" type="text" class="mui-input-clear" placeholder="请输入地址" value="<?php if(!empty($add_info)){ echo $add_info[0]['add_place'];} ?>">
                <input type="hidden" name="add_lat" value="<?php if(!empty($add_info)){ echo $add_info[0]['add_lat'];} ?>">
                <input type="hidden" name="add_lng" value="<?php if(!empty($add_info)){ echo $add_info[0]['add_lng'];} ?>">
            </div>
            <div class="mui-input-row">
                <label><i style="color: red;">*</i>门牌号</label>
                <input id="house" type="text" class="mui-input-clear" placeholder="请输入门牌号" value="<?php if(!empty($add_info)){ echo $add_info[0]['add_brand'];} ?>">
            </div>
            <div class="mui-button-row" style="padding: 5px 15px;">
                <input type="hidden" name="id" value="<?php if(!empty($add_info)){echo $add_info[0]['id'];} ?>">
                <a id="addressEdit" class="addressEditBtn" href="javascript:void(0);">保存并使用</a>
            </div>
            <div id="wrapper" style="display:none;"></div>
        </form>
    </section>
</body>
<script src="js/jquery-2.2.4.min.js" type="text/javascript"></script>
 <script type="text/javascript">
 function getQueryString(name){
    var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if (r!=null) return r[2]; return '';
}
 $(function() {
    mui.init();
     var addressId = getQueryString('id');
     if (addressId) {
         $('#editAddressTittle').text('修改收货地址')
        /**
        * @name: 这边需要请求接口获取已经输入的信息
        * @test: test font
        * @msg:
        * @param {type}
        * @return:
        */
     } else {
        $('#editAddressTittle').text('新增收货地址')
     };

     var map = new AMap.Map("wrapper", {
         resizeEnable: true
     });
     var geocoder = new AMap.Geocoder();
     var marker = new AMap.Marker();
     function geoCode() {
         var address  = document.getElementById('address').value;
             $("input[name='add_lng']").attr('value','');
             $("input[name='add_lat']").attr('value','');
         geocoder.getLocation(address, function(status, result) {
             if (status === 'complete'&&result.geocodes.length) {
                 var lnglat = result.geocodes[0].location
                 $("input[name='add_lng']").attr('value', lnglat.lng);
                 $("input[name='add_lat']").attr('value', lnglat.lat);
                 console.log(lnglat);
             }else{
                 $("input[name='add_lng']").attr('value','');
                 $("input[name='add_lat']").attr('value','');
                //  mui.alert(label.innerText + "未查询到该地址信息");
             }
         });
     }
     $("#address").change(function(){
         geoCode();
     })

     /**
      * @name: 性别切换
      * @test: test font
      * @msg:
      * @param {type}
      * @return:
      */
     $('.address-gender span').click(function(){
        if($(this).hasClass("active")) return;
        $(".active").removeClass("active");
        $(this).addClass("active");
        // console.log($('.active').attr('gender'))
     })
     /**
      * @name: 保存并跳转
      * @test: test font
      * @msg:
      * @param {type}
      * @return:
      */
      function checktel(val,type){
        if(val==''){
            return false
        }
        var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
        return myreg.test(val)
      }

     $('#addressEdit').click(function () {
        var check = true;
        mui("#addressEditForm .mui-input-clear").each(function() {
            //若当前input为空，则alert提醒
            if(!this.value || this.value.trim() == "") {
                var label = this.previousElementSibling;
                mui.alert(label.innerText + "不允许为空");
                check = false;
                return false;
            } else if (this.id == 'phone' && !checktel(this.value)) {
                mui.alert("手机号码错误，请重新输入");
                check = false;
                return false;
            }
            if( $("input[name='add_lng']").val() == ''){
                mui.alert("未查询到该地址，请输入正确的收货地址");
                check = false;
                return false;
            }
        }); //校验通过，继续执行业务逻辑
        if(check){
            var person = $('#person').val();
            var phone = $('#phone').val();
            var address = $('#address').val();
            var house = $('#house').val();
            var add_lng = $("input[name='add_lng']").val();
            var add_lat = $("input[name='add_lat']").val();
            var id = $("input[name='id']").val();
            var gender = $('.active').attr('gender');
            $.ajax({
                url: 'address_ajax.php',
                type: "post",
                data: {'add_place':address,'add_brand':house,'add_link':person,'add_sex':gender,'add_mobile':phone,'id':id,'add_lat':add_lat,'add_lng':add_lng} ,
                dataType: 'json',
                success:function(res){
                    console.log(res);
                    if(res.status == 'y'){
                        mui.alert(res.info);
                        window.location.href=document.referrer;
                    }else{
                        mui.alert(res.info);
                    }
                }
            })
            // console.log(`${person}-${phone}-${address}-${house}-${gender}`)
            // window.location.href = "./address_list.php";
        }
     })
 })
 </script>
</html>
